<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        账号：<input type="text" v-model="val"><br>
        密码：<input type="text" v-model="val"><br>
        <!-- 单选框 -->
        <input type="radio" name="sex" value="0" v-model="sex">男
        <input type="radio" name="sex" value="1" v-model="sex">女<br>
        <!-- 多选框 -->
        <input type="checkbox" v-model="hobby" name="hobby" value="0">学习<br>
        <input type="checkbox" v-model="hobby" value="1" name="hobby">运动<br>
        <input type="checkbox" v-model="hobby" value="2" name="hobby">游戏<br>
        <!-- 4.下拉列表 -->
        <select name="job" id="" v-model="job">
            <option value="哈佛">哈佛</option>
            <option value="剑桥">剑桥</option>
            <option value="麻省理工">麻省理工</option>
            <option value="qing">qing</option>
        </select>
        <button @click="getData">获取数据</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                val:"",
                sex:"",
                hobby:[],
                job:""
            },
            methods: {
                getData(){
                    var {val,sex,hobby,job} =this;
                    console.log(val,sex,hobby,job);
                }
            }
        })
    </script>
</body>
</html>